<template>
  <div id="Company_drugs_search">
    <span>
      <img src="../assets/medicine.png" alt="" class="bread-icon">
    </span>
    <!-- 面包屑导航 -->
    <el-breadcrumb style="display:inline-block">
      <el-breadcrumb-item>
        <span style="font-size:20px;">药品管理</span>
      </el-breadcrumb-item>
      <el-breadcrumb-item>
        <span style="font-size:15px;line-height:20px;">药品查询</span>
      </el-breadcrumb-item>
    </el-breadcrumb>
    <div class="content-wrap">
      <div class="topNav">
        <span class="navLeft">药品查询</span>
        <span class="navRight">
          <el-button size="small" @click="drugSearch()">搜索</el-button>
          <el-button size="small" class="el-button--primary" @click="setColumns">设置</el-button>
        </span>
        <span class="navMid">
          <img class="icon-search" src="../assets/search.png" alt="">
          <el-input v-model="searchData" size="small" placeholder="请输入内容" class="searchInput"></el-input>
        </span>
      </div>

      <el-table :data="drugsData.data" v-loading="drugsData.loading" border class="table-common" :max-height="drugsData.tableHeight">
        <!-- <el-table-column fixed prop="id" label="药品id" sortable v-if='columns.contains("id")'>
        </el-table-column> -->
        <el-table-column prop="common_name" label="药品通用名称" sortable v-if='columns.contains("药品通用名称")'>
        </el-table-column>
        <el-table-column prop="approval_number" label="批准文号" v-if='columns.contains("批准文号")'>
        </el-table-column>
        <el-table-column prop="created_at" label="生产日期" v-if='columns.contains("生产日期")'>
        </el-table-column>
        <el-table-column prop="approval_expiry_date" label="批准文号有效期" v-if='columns.contains("批准文号有效期")'>
        </el-table-column>
        <el-table-column prop="expiry_date_number" label="药品有效期" v-if='columns.contains("药品有效期")'>
        </el-table-column>
        <el-table-column prop="expiry_date_unit" label="有效期单位" v-if='columns.contains("有效期单位")'>
        </el-table-column>
        <el-table-column prop="standard" label="制剂规格" v-if='columns.contains("制剂规格")'>
        </el-table-column>
        <el-table-column prop="factory" label="生产企业" v-if='columns.contains("生产企业")'>
        </el-table-column>
        <!-- <el-table-column prop="enterprise" label="所属企业" v-if='columns.contains("所属企业")'>
        </el-table-column> -->
        <el-table-column label="状态" width="90">
          <template slot-scope="scope">
            <el-button type="primary" plain size="mini" disabled v-if="scope.row.is_verified">已审核</el-button>
            <el-button type="danger" plain size="mini" disabled v-else>未审核</el-button>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作">
          <template slot-scope="scope">
            <el-button @click="showForm(scope.row)" type="info" plain size="mini">查看详情</el-button>
            <el-button v-if="adminUsertype !=3" @click="changeForm(scope.row)" type="primary" plain size="mini">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 表格 -->
      <div class="block" style="text-align:center">
        <el-pagination @size-change="drugsHandleSizeChange" @current-change="drugsHandleCurrentChange" :current-page="drugsData.currentPage"
          :page-sizes="[20]" :page-size="drugsData.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="drugsData.dataSize">
        </el-pagination>
      </div>

    </div>
    <!-- 表格详细信息 弹窗 -->
    <el-dialog title="详细信息" :visible.sync="dialogTableVisible" width="70%">
      <el-form :model="formData">
        <el-form-item label="药品通用名称" :label-width="formLabelWidth">
          <el-input v-model="formData.common_name" auto-complete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="批准文号" :label-width="formLabelWidth">
          <el-input v-model="formData.approval_number" auto-complete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="批准文号有效期" :label-width="formLabelWidth">
          <el-input v-model="formData.approval_expiry_date" auto-complete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="药品有效期" :label-width="formLabelWidth">
          <el-input v-model="formData.expiry_date_number" auto-complete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="有效期单位" :label-width="formLabelWidth">
          <el-input v-model="formData.expiry_date_unit" auto-complete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="剂型" :label-width="formLabelWidth">
          <el-input v-model="formData.form" auto-complete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="制剂规格" :label-width="formLabelWidth">
          <el-input v-model="formData.standard" auto-complete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="生产企业" :label-width="formLabelWidth">
          <el-input v-model="formData.factory" auto-complete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="所属企业" :label-width="formLabelWidth">
          <el-input v-model="formData.enterprise" auto-complete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="包装规格" :label-width="formLabelWidth">
          <el-input v-model="formData.package_spec" auto-complete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="包装比例" :label-width="formLabelWidth">
          <el-input v-model="formData.packing_proportion" auto-complete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="商品名" :label-width="formLabelWidth">
          <el-input v-model="formData.product_name" auto-complete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="年赋码量" :label-width="formLabelWidth">
          <el-input v-model="formData.code_quantity" auto-complete="off" disabled></el-input>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 修改表格信息 弹窗 -->
    <el-dialog title="修改信息" :visible.sync="dialogFormVisible">
      <el-form :model="formData">
        <el-form-item label="ID" :label-width="formLabelWidth">
          <el-input v-model="formData.id" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="药品通用名称" :label-width="formLabelWidth">
          <el-input v-model="formData.common_name" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="批准文号" :label-width="formLabelWidth">
          <el-input v-model="formData.approval_number" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="批准文号有效期" :label-width="formLabelWidth">
          <el-input v-model="formData.approval_expiry_date" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="药品有效期" :label-width="formLabelWidth">
          <el-input v-model="formData.expiry_date_number" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="有效期单位" :label-width="formLabelWidth">
          <el-input v-model="formData.expiry_date_unit" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="制剂规格" :label-width="formLabelWidth">
          <el-input v-model="formData.standard" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="生产企业" :label-width="formLabelWidth">
          <el-input v-model="formData.factory" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="所属企业" :label-width="formLabelWidth">
          <el-input v-model="formData.enterprise" auto-complete="off"></el-input>
        </el-form-item>
        <template v-if="formData.is_verified">
          <el-form-item label="包装规格" :label-width="formLabelWidth">
            <el-input v-model="formData.package_spec" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="包装比例" :label-width="formLabelWidth">
            <el-input v-model="formData.packing_proportion" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="商品名" :label-width="formLabelWidth">
            <el-input v-model="formData.product_name" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="年赋码量" :label-width="formLabelWidth">
            <el-input v-model="formData.code_quantity" auto-complete="off"></el-input>
          </el-form-item>
        </template>
        <template v-else>
          <el-form-item label="包装规格" :label-width="formLabelWidth">
            <el-input v-model="formData.package_spec" auto-complete="off" disabled></el-input>
          </el-form-item>
          <el-form-item label="包装比例" :label-width="formLabelWidth">
            <el-input v-model="formData.packing_proportion" auto-complete="off" disabled></el-input>
          </el-form-item>
          <el-form-item label="商品名" :label-width="formLabelWidth">
            <el-input v-model="formData.product_name" auto-complete="off" disabled></el-input>
          </el-form-item>
          <el-form-item label="年赋码量" :label-width="formLabelWidth">
            <el-input v-model="formData.code_quantity" auto-complete="off" disabled></el-input>
          </el-form-item>
        </template>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateForm">提交</el-button>
      </div>
    </el-dialog>
    <el-dialog title="自定义列表" :visible.sync="setColumnsShow">
      <template>
        <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
        <div style="margin: 15px 0;"></div>
        <el-checkbox-group v-model="columns" @change="handleCheckedHeaderChange" class="tableSelect">
          <el-checkbox v-for="city in columnsSelect" :label="city" :key="city" border>{{city}}</el-checkbox>
        </el-checkbox-group>
        <div style="text-align:right">
          <el-button class="el-button--primary" @click="setLocalColumns">保存</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script>
  const headerOptions = ['药品通用名称', '批准文号', '批准文号有效期', '药品有效期', '有效期单位', '制剂规格', '生产企业'];
  export default {
    data() {
      return {
        dialogTableVisible: false,
        dialogFormVisible: false,
        setColumnsShow: false,
        isIndeterminate: true,
        checkAll: false,
        adminId: '',
        adminUsertype:'',
        enterprise: '',
        adminToken: '',
        searchData: '',
        drugsData: {
          data: [],
          loading: true,
          currentPage: 1,
          pageSize: 20,
          dataSize: 0,
        },
        tableHeight: '',
        gridData: [{}],
        formData: {},
        formLabelWidth: '150px',
        columns: [
          '药品通用名称',
          '批准文号',
          '制剂规格',
          '生产企业'
        ],
        columnsSelect: headerOptions,

      }
    },
    methods: {
      getDrugsData() {
        this.drugsData.loading = true
        this.$http({
          url: '/drugs/?search=' + this.searchData + '&page=' + this.drugsData.currentPage,
          method: 'get',
          headers: {
            'Authorization': 'Token ' + this.adminToken
          },
        }).then(
          response => {
            console.log(response)
            this.drugsData.data = []
            if (response.data.count < 100) {
              this.drugsData.dataSize = response.data.count
            } else {
              this.drugsData.dataSize = 100
            }
            // response.data.forEach(element => {
            //   this.tableData.push(element)
            // });
            this.drugsData.data = response.data.results
            this.$message({
              message: '查询成功',
              showClose: true,
              type: 'success'
            });
            this.drugsData.loading = false
          }
        ).catch(error => {
          console.log(error.response)
          if (error.response.status == 401) {
            this.$message({
              message: error.response.data.detail,
              type: 'warning'
            })
            this.$router.push({
              path: '/login'
            });
          } else if (error.response.status == 400) {
            this.$message({
              message: 'error400',
              type: 'error'
            })
          } else {
            this.$message({
              message: '未知错误',
              type: 'error'
            })
          }
          console.log(error);
        });
      },
      drugSearch() {
        if (this.searchData != '') {
          this.getDrugsData()
          this.drugsData.currentPage = 1
        } else {
          this.$message({
            message: '请输入搜索药品信息',
            type: 'warning'
          })
        }

      },
      showForm(row) {
        this.dialogTableVisible = true
        this.formData = ''
        this.formData = row
      },
      changeForm(row) {
        this.dialogFormVisible = true
        this.formData = row;
        console.log(this.formData);
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      updateForm(row) {
        this.dialogFormVisible = false;
        this.$http({
          url: '/drugs/' + this.formData.id + '/',
          headers: {
            'Authorization': 'Token ' + this.$store.getters.getInfo.token
          },
          method: 'put',
          data: this.formData
        }).then(
          response => {
            this.$message({
              message: '修改成功',
              type: 'success'
            })
          }
        ).catch(error => {
          console.log(error.response)
          if (error.response.status == 401) {
            this.$message({
              message: error.response.data.detail,
              type: 'warning'
            })
            this.$router.push({
              path: '/login'
            });
          } else if (error.response.status == 400) {
            this.$message({
              message: '修改失败',
              type: 'error'
            })
          } else {
            this.$message({
              message: error.response.data.detail,
              type: 'warning'
            })
          }
          console.log(error);
        });
      },
      setColumns: function () {
        this.setColumnsShow = true
        // this.columns.push('standard')
      },
      setLocalColumns: function () {
        this.setColumnsShow = false
        localStorage.setItem('CompanyDrugsColumns', JSON.stringify({
          colums: this.columns
        }))
        this.$message({
          type: 'success',
          message: '保存成功'
        })
      },
      handleCheckAllChange(val) {
        this.columns = val ? headerOptions : [];
        this.isIndeterminate = false;
      },
      handleCheckedHeaderChange(value) {
        let checkedCount = value.length;
        this.checkAll = checkedCount === this.columnsSelect.length;
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.columnsSelect.length;
        console.log(this.columns)
      },
      drugsHandleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      drugsHandleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.drugsData.currentPage = val
        this.getDrugsData()
      },
    },

    mounted() {
      this.adminId = this.$store.getters.getInfo.id
      this.enterprise = this.$store.getters.getInfo.enterprise
      this.adminToken = this.$store.getters.getInfo.token
      this.adminUsertype = this.$store.getters.getInfo.user_type
      this.tableHeight = document.getElementsByClassName('table-common')[0].parentNode.clientHeight - 112
      if (localStorage.getItem('CompanyDrugsColumns')) {
        this.columns = JSON.parse(localStorage.getItem('CompanyDrugsColumns')).colums
      }
      this.getDrugsData()
    },
  }

</script>

<style scoped>
  #Company_drugs_search>>>.el-dialog {
    max-width: 550px;
    max-height: 600px;
    overflow: scroll;
  }

  /* #Company_medcode >>> .el-dialog input{
    width: 250px;
} */

</style>
